[pass <div>] [# to keep things in one grid column]
[inject ./head.xd]
[link-stylesheet awesomplete/awesomplete.min.css]
[<script> defer; src="awesomplete/awesomplete.min.js"; onload="[raw<
  for (const input of document.querySelectorAll('input[list]')) {
    input.addEventListener('focus', () => input.select());
    new Awesomplete(input, { minChars: 1, autoFirst: true });
  }
  new Awesomplete(document.querySelector('#new-quote-text'), {
    list: document.querySelector('#people-names'),
    filter: (text, input) => {
      const match = input.match(/\[([^[]+)$/); //]]
      return match && Awesomplete.FILTER_CONTAINS(text, match[1]);
    },
    replace: function(text) {
      this.input.value = this.input.value.replace(/\[([^[]+)$/, '[' + text + '] '); //]]
    },
  });
]";]
[js-module-raw
  import { softReloadSetup, softReloadForm } from "./soft-reload.js";
  softReloadSetup(["quotes"]);
  softReloadForm(document.getElementById("new-quote"), ["quotes"], { reset: true })
  softReloadForm(document.getElementById("search"), ["quotes"])
  document.addEventListener("keyup", (event) => {
    const newQuote = document.getElementById("new-quote");
    if (event.ctrlKey && event.key === "Enter") {
      event.preventDefault();
      if (newQuote.contains(document.activeElement)) {
        newQuote.submit();
      }
    }
    if (event.altKey && event.key === "a") {
      event.preventDefault();
      if (newQuote.contains(document.activeElement)) {
        document.getElementById("new-quote-author").focus();
      }
    }
  });
]
[style
  [rule body;
    [: display; grid]
    [: grid-template-columns; 100%]
  ]
  [rule body>*;
    [: padding; 0 0.5rem]
  ]
  [rule .quote;
    [: border; 2px solid [Gray-8]]
    [: padding; 0.5rem]
    [: margin-top; 0.5rem]
  ]
  [rule .quote>summary;
    [: width; 100%]
    [: list-style; none]
  ]
  [rule @media only screen and (min-width: 1200px);
    [rule html,body;
      [: height; 100%]
    ]
    [rule body;
      [: max-width; 1600px]
      [: grid-template-columns; 50% 50%]
      [: grid-template-rows; 100%]
      [: overflow; hidden]
    ]
    [rule body>*;
      [: overflow-y; auto]
      [: height; 100%]
    ]
  ]
  [rule .loading;
    [: opacity; 0.3]
  ]
]
{people_names_datalist}
[section Přidat hlášku;
  {banners}
  [<form> #new-quote; .quote; method="POST";
    [<div> .labeled-input;
      [<label> for="new-quote-author"; Autor]
      [<input> #new-quote-author; name="new-quote-author"; type="text"; list="people-names"; autocomplete="off"; placeholder="Příjmení Jméno"; required]
    ]
    [labeled-textarea Text; new-quote-text; text; ]
    [labeled-textarea Kontext; new-quote-context; context; ]
    [<div> .labeled-input;
      [<label> for="new-quote-writer"; Vaše jméno]
      [<input> #new-quote-writer; name="new-quote-writer"; type="text"; list="people-names"; autocomplete="off"; placeholder="Příjmení Jméno"; value="Blažek Adam"; required]
    ]
    [<button> type="submit"; ⨁ Přidat]
  ]
]
[pass </div>]
[section Seznam hlášek;
  [<form> #search; .list-options; method="GET";
    [<div> .labeled-input;
      [<label> Počet hlášek]
      [<div> .radios;
        [<input> #num-quotes-100; name="num-quotes"; type="radio"; value="100"; {num_quotes_100}]
        [<label> for="num-quotes-100"; prvních 100]
        [<input> #num-quotes-all; name="num-quotes"; type="radio"; value="0"; {num_quotes_all}]
        [<label> for="num-quotes-all"; všechny]
      ]
    ]
    [<div> .labeled-input;
      [<label> Seřadit]
      [<div> .radios;
        [<input> #sorting-newest; name="sorting"; type="radio"; value="newest"; {sorting_newest}]
        [<label> for="sorting-newest"; od nejnovější]
        [<input> #sorting-oldest; name="sorting"; type="radio"; value="oldest"; {sorting_oldest}]
        [<label> for="sorting-oldest"; od nejstarší]
        [<input> #sorting-random; name="sorting"; type="radio"; value="random"; {sorting_random}]
        [<label> for="sorting-random"; náhodně]
      ]
    ]
    [<div> .labeled-input;
      [<label> for="filter-author"; Autor]
      [<input> #filter-author; name="filter-author"; type="text"; value="{filter_author}"; list="people-names"; autocomplete="off"]
    ]
    [<div> .labeled-input;
      [<label> for="filter-text-context"; Text/Kontext]
      [<input> #filter-text-context; name="filter-text-context"; type="text"; value="{filter_text_context}"]
    ]
    [<div> .labeled-input;
      [<label> for="language-select"; Jazyk]
      [<select> #language-select; name="language";
        [<option> value="original"; {lang_original}; Původní]
        [<option> value="english"; {lang_english}; Angličtina]
        [<option> value="both"; {lang_english}; Obojí]
      ]
    ]
    [<button> type="submit"; 👁 Zobrazit]
  ]
  [<div> #quotes;
    [p Zobrazeno [<strong> {num_displayed_quotes}] z celkem [<strong> {num_total_quotes}] hlášek. Kliknutím na hlášku zobrazíte více informací.]
    {quotes}
  ]
]
